<template>
  <div>
    <el-row>
      <el-col :span="8">
        <span>Hi，欢迎来到大麦</span>
        <span>&nbsp;[ <span class="loginText">登录</span> 注册 ]</span>
        <span
          >&nbsp;&nbsp;&nbsp;我的大麦<i class="el-icon-arrow-down"></i
        ></span>
      </el-col>
      <el-col :offset="5" :span="10">
        <ul>
          <li>大麦网微信</li>
          <li>手机版</li>
          <li>客户服务<i class="el-icon-arrow-down"></i></li>
          <li>网站导航<i class="el-icon-arrow-down"></i></li>
          <li>English</li>
        </ul>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="1">
        <img src="/images/logo.png" width="200" />
        <span class="address"
          >{{ citys[0] }}<i class="el-icon-arrow-down" @click="city"></i
        ></span>
        <div class="citys">
          <el-tag
            v-for="item in "
            :key="item.label"
            type="info"
            effect="plain"
          >
            {{ item.label }}
          </el-tag>
        </div>
      </el-col>
      <el-col class="search" :span="10" :offset="1">
        <input
          v-model="input"
          style="
            outline: none;
            height: 40px;
            width: 430px;
            border: 4px solid #ff3c1b;
            text-indent: 2rem;
          "
          placeholder="请输入演出、艺人、场馆名称"
        />
        <button
          type="button"
          style="
            height: 48px;
            width: 80px;
            border: 0;
            background: #ff3c1b;
            color: white;
          "
        >
          搜索
        </button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import "../Mock/get/api_home_city";
export default {
  name: "publicHeader",
  data() {
    return {
      input: "",
      citys: ["北京"],
    };
  },
  methods: {
    city() {
      this.$http.get("/api/home/city").then((res) => {
        // console.log(res.data);
        this.citys.push = res.data;
      });
    },
  },
};
</script>

<style scoped>
.el-row {
  /* border:1px solid red */
}
.el-row:nth-of-type(1) {
  background-color: #f7f7f7;
  border-bottom: 1px solid #e6e6e6;
  height: 40px;
}
.el-row:nth-of-type(2) {
  height: 150px;
  /* background-color: hotpink; */
}
.el-row:nth-of-type(2) .el-col {
  height: 150px;
}
.address {
  position: relative;
  bottom: 70px;
  font-size: 18px;
  left: 30px;
}
.search {
  /* border:1px solid red; */
  padding-top: 30px;
}
.search button {
  position: relative;
  top: 1.6px;
  font-size: 14px;
}
.el-row:nth-of-type(2) .el-col img {
  margin-top: 9%;
}
.el-row:nth-of-type(1) .el-col {
  /* border:1px solid red; */
  line-height: 38px;
}
.el-row:nth-of-type(1) span {
  font-size: 13px;
}
.loginText {
  color: #fd6235;
}
ul {
  list-style: none;
  margin-left: 9vw;
}
ul li {
  float: left;
  font-size: 13px;
  margin-left: 35px;
  font-weight: bold;
}
.citys {
  height: 300px;
  widows: 100px;
  /* border:1px solid red; */
  background-color: white;
  position: relative;
  left: 18vw;
  top: -9vh;
  z-index: 999;
  border-radius: 15px;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.07);
}
</style>